<template>
  <!-- 文件平铺 -->
  <div class="file-grid-wrapper">
    <ul
      v-loading="loading"
      class="file-list"
      element-loading-text="文件加载中……"
    >
      <li
        v-for="(item, index) in fileListSorted"
        :key="index"
        class="file-item"
        :title="$file.getFileNameComplete(item)"
        :style="`width: ${gridSize + 40}px; `"
        :class="item.userFileId === selectedFile.userFileId ? 'active' : ''"
        @click="$file.handleFileNameClick(item, index, fileListSorted)"
        @contextmenu.prevent="handleContextMenu(item, index, $event)"
      >
        <video
          v-if="$file.isVideoFile(item)"
          :style="`height:${gridSize}px; width:${gridSize}px`"
          :src="$file.setFileImg(item)"
        />
        <el-image
          v-else
          class="file-img"
          :src="$file.setFileImg(item)"
          :style="`width: ${gridSize}px; height: ${gridSize}px;`"
          fit="cover"
        />
        <div
          class="file-name"
          v-html="$file.getFileNameComplete(item, true)"
        />
        <i
          v-if="screenWidth <= 768"
          class="file-operate el-icon-more"
          :class="`operate-more-${index}`"
          @click.stop="handleClickMore(item, $event)"
        />
        <div
          v-show="isBatchOperation"
          class="file-checked-wrapper"
          :class="{ checked: item.checked }"
          @click.stop.self="item.checked = !item.checked"
        >
          <el-checkbox
            v-model="item.checked"
            class="file-checked"
            @click.stop="item.checked = !item.checked"
          />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'FileGrid',
  props: {
    // 文件类型
    fileType: {
      required: true,
      type: Number
    },
    // 文件路径
    filePath: {
      required: true,
      type: String
    },
    fileList: Array, //  文件列表
    loading: Boolean
  },
  data() {
    return {
      fileListSorted: [],
      officeFileType: ['ppt', 'pptx', 'doc', 'docx', 'xls', 'xlsx'],
      selectedFile: {}
    }
  },
  computed: {
    /**
		 * gridSize: 图标大小
		 *  */
    ...mapGetters(['gridSize']),
    // 是否批量操作
    isBatchOperation() {
      return this.$store.state.netFile.isBatchOperation
    },
    // 批量操作模式 - 被选中的文件
    selectedFileList() {
      const res = this.fileListSorted.filter((item) => item.checked)
      return res
    },
    // 屏幕宽度
    screenWidth() {
      return this.$store.state.netFile.fileScreenWidth
    }
  },
  watch: {
    // 文件平铺模式 排序-文件夹在前
    fileList(newValue) {
      this.fileListSorted = [...newValue]
        .sort((pre, next) => {
          return next.isDir - pre.isDir
        })
        .map((item) => {
          return {
            ...item,
            checked: false
          }
        })
    },
    // 批量操作模式 - 监听被选中的文件
    selectedFileList(newValue) {
      this.$store.dispath('netFile/changeSelectedFiles', newValue)
      this.$store.dispath('netFile/changeIsBatchOperation', newValue.length !== 0)
    }
  },
  methods: {
    /**
		 * 文件鼠标右键事件
		 * @param {object} item 文件信息
		 * @param {number} index 文件索引
		 * @param {object} event 鼠标事件信息
		 */
    handleContextMenu(item, index, event) {
      // 阻止右键事件冒泡
      event.cancelBubble = true
      // xs 以上的屏幕
      if (this.screenWidth > 768) {
        this.selectedFile = item
        if (!this.isBatchOperation) {
          event.preventDefault()
          this.$openFileBox
            .contextMenu({
              selectedFile: item,
              domEvent: event
            })
            .then((res) => {
              this.selectedFile = {}
              if (res === 'confirm') {
                this.$emit('getTableDataByType') //  刷新文件列表
                this.$store.dispatch('netFile/showStorage') //  刷新存储容量
              }
            })
        }
      }
    },
    /**
		 * 更多图标点击事件
		 * @description 打开右键菜单
		 * @param {object} item 当前行数据
		 * @param {object} event 当前右键元素
		 */
    handleClickMore(item, event) {
      this.selectedFile = item
      if (!this.isBatchOperation) {
        event.preventDefault()
        this.$openFileBox
          .contextMenu({
            selectedFile: item,
            domEvent: event
          })
          .then((res) => {
            this.selectedFile = {}
            if (res === 'confirm') {
              this.$emit('getTableDataByType') //  刷新文件列表
              this.$store.dispatch('netFile/showStorage') //  刷新存储容量
            }
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.file-grid-wrapper {
  border-top: 1px solid #DCDFE6;

  .file-list {
    height: calc(100vh - 206px);
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    list-style: none;
    // 修改滚动条下面的宽度
    &::-webkit-scrollbar {
      width: 6px;
    }
    // 修改滚动条的下面的样式
    &::-webkit-scrollbar-track {
      background-color: transparent;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
    }
    // 修改滑块
    &::-webkit-scrollbar-thumb {
      background-color: #C0C4CC;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
    }
    .file-item {
      margin: 0 16px 16px 0;
      position: relative;
      padding: 8px;
      text-align: center;
      cursor: pointer;
      z-index: 1;

      &:hover {
        background: #F5F7FA;

        .file-name {
          font-weight: 550;
        }
      }

      .file-name {
        margin-top: 8px;
        height: 44px;
        line-height: 22px;
        font-size: 12px;
        word-break: break-all;
        display: -webkit-box;
        overflow: hidden;
        white-space: wrap;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical; /* -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
        -webkit-line-clamp: 2; /* -webkit-line-clamp用来限制在一个块元素显示的文本的行数 */

        >>> .keyword {
          color: #F56C6C;
        }
      }

      .file-checked-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        background: rgba(245, 247, 250, 0.5);
        width: 100%;
        height: 100%;

        .file-checked {
          position: absolute;
          top: 16px;
          left: 24px;
        }
      }

      .file-checked-wrapper.checked {
        background: rgba(245, 247, 250, 0);
      }
    }
    .file-item.active {
      background: #F5F7FA;
    }
  }

  .right-menu-list {
    position: fixed;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #EBEEF5;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    z-index: 2;
    padding: 4px 0;
    color: #606266;

    .right-menu-item,
    .unzip-item {
      padding: 0 16px;
      height: 36px;
      line-height: 36px;
      cursor: pointer;
      &:hover {
        background: #ecf5ff;
        color: #409EFF;
      }
      i {
        margin-right: 8px;
      }
    }

    .unzip-menu-item {
      position: relative;
      &:hover {
        .unzip-list {
          display: block;
        }
      }
      .unzip-list {
        position: absolute;
        display: none;
        .unzip-item {
          width: 200px;
          display: -webkit-box;
          overflow: hidden;
          white-space: wrap;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical; /* -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
          -webkit-line-clamp: 1; /* -webkit-line-clamp用来限制在一个块元素显示的文本的行数 */
        }
      }
    }
  }
  .right-menu-list,
  .unzip-list {
    background: #fff;
    border: 1px solid #EBEEF5;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    z-index: 2;
    padding: 4px 0;
    color: #606266;
  }
}
</style>
